<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>用户后台管理</title>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">
		<link rel="stylesheet" href="css/upload-file.css">
		<link rel="stylesheet" href="plug-ins/xcConfirm/css/xcConfirm.css">
		<link rel="stylesheet" href="plug-ins/context-menu/css/contextMenu.css">
		<style>
			.files-items{
				margin-top: -20px;
				border-bottom: 1px dashed #bdc3c7;
				border-top: 1px dashed #bdc3c7;
			}
			.files-items:hover{
				background: #F4FBFF;
			}
		</style>

	</head>

	<body>
		<div id="app">
			<div class="main-wrapper">
				<div class="navbar-bg"></div>
				<div th:replace="commons/u-admin-bar::#navbar"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='file-store')"></div>

				<div class="main-content">
					<section class="section">
						<h1 class="section-header">
							<div><i class="icon ion-ios-cloud"></i> 我的网盘 <span style="color: red;font-size: 14px" th:if="${error != null}" th:text="${error}"></span></div>
						</h1>
						<div class="row">
							<div class="col-12 col-sm-12 col-lg-12">
							<div class="card">
								<div class="card-body">
									<ul class="nav nav-tabs" id="myTab" role="tablist">
										<li class="nav-item">
											<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="icon ion-ios-folder"></i> 全部文件</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="icon ion-android-list"></i> 使用信息</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="icon ion-upload"></i> 传文件到当前目录</a>
										</li>
									</ul>
									<div class="tab-content" id="myTabContent" >
										<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                                            <nav aria-label="breadcrumb" class="empty-space">
                                                        <ol class="breadcrumb">
                                                            <li class="breadcrumb-item"><a
                                                                    th:href="@{/file-store(fId=${nowFolder.fileFolderId})}"
                                                                    title="刷新"><i
                                                                    class="icon ion-refresh"></i></a>
                                                            </li>
                                                            <li th:class="${nowFolder.fileFolderId == 0?'breadcrumb-item active':'breadcrumb-item'}">
                                                            <span th:if="${nowFolder.fileFolderId == 0}"
                                                                  th:text="根目录"></span><a style="font-weight: bold"
                                                                                          th:if="${nowFolder.fileFolderId != 0}"
                                                                                          href="file-store">根目录</a></li>
                                                            <li th:each="l:${location}" class="breadcrumb-item"><a
                                                                    style="font-weight: bold"
                                                                    th:href="@{/file-store(fId=${l.fileFolderId},fName=${l.fileFolderName})}"
                                                                    th:text="${l.fileFolderName}"></a></li>
                                                            <li th:if="${nowFolder.fileFolderId != 0}"
                                                                class="breadcrumb-item active" aria-current="page"
                                                                th:text="${nowFolder.fileFolderName}"></li>
                                                            <li th:if="${nowFolder.fileFolderId != 0}"
                                                                class="breadcrumb-item"><a
                                                                    th:href="@{/file-store(fId=${nowFolder.parentFolderId})}"
                                                                    title="返回上一层"><i
                                                                    class="icon ion-arrow-return-left"></i></a>
                                                            </li>
                                                        </ol>
                                                    </nav>
											<div class="row" style="margin-top: -10px;">
												<div class="col-12">
													<table class="table tab-bordered" id="files-table">
														<tr id="files-table-title" class="empty-space">
															<th width="2%"></th>
															<th width="20%">名称</th>
															<th width="15%">类型</th>
															<th width="15%">扩展名</th>
															<th width="15%">大小</th>
															<th width="15%">下载次数</th>
															<th width="18%">时间</th>
														</tr>
														<tr th:each="folder:${folders}" class="files-items folders">
															<td><span style="display: none" th:text="${folder.fileFolderId}"></span><i style="font-size: 24px;color: orange" class="icon ion-android-folder"></i></td>
															<td>
																<a th:href="@{/file-store(fId=${folder.fileFolderId},fName=${folder.fileFolderName})}" style="font-weight: 700;color: black" th:text="${folder.fileFolderName}"></a>
															</td>
															<td style="font-weight: 300">文件夹</td>
															<td style="font-weight: 300">-</td>
															<td style="font-weight: 300">-</td>
															<td style="font-weight: 300">-</td>
															<td style="font-weight: 300" th:text="${#dates.format(folder.time,'yyyy-MM-dd HH:mm')}"></td>
														</tr>
														<tr th:each="f:${files}" class="files-items files">
															<td><span style="display: none" th:text="${f.myFileId}"></span>
                                                                <i style="font-size: 24px;color: #3498db" th:if="${f.type == 1}" class="icon ion-document-text"></i>
                                                                <i style="font-size: 24px;color: #28a745" th:if="${f.type == 2}" class="icon ion-image"></i>
                                                                <i style="font-size: 24px;color: #FFC107" th:if="${f.type == 3}" class="icon ion-ios-videocam"></i>
                                                                <i style="font-size: 24px;color: #dc3545" th:if="${f.type == 4}" class="icon ion-ios-musical-notes"></i>
                                                                <i style="font-size: 24px;color: #343A40" th:if="${f.type == 5}" class="icon ion-document"></i>
                                                            </td>
															<td>
																<a href="#" style="font-weight: 700;color: black" th:text="${f.myFileName}">简历.doc</a>
															</td>
															<td style="font-weight: 300" th:if="${f.type == 1}">文档</td>
															<td style="font-weight: 300" th:if="${f.type == 2}">图像</td>
															<td style="font-weight: 300" th:if="${f.type == 3}">视频</td>
															<td style="font-weight: 300" th:if="${f.type == 4}">音乐</td>
															<td style="font-weight: 300" th:if="${f.type == 5}">其他</td>
															<td style="font-weight: 300" th:text="${f.postfix}"></td>
															<td style="font-weight: 300" th:text="${f.size+'KB'}"></td>
															<td style="font-weight: 300" th:text="${f.downloadTime}"></td>
															<td style="font-weight: 300" th:text="${#dates.format(f.uploadTime,'yyyy-MM-dd HH:mm')}">2020-02-02 15:08</td>
														</tr>
                                                    </table>
												</div>
											</div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="float-right">
                                                        <a href="javaScript:addFolderElement()" class="btn btn-outline-success"><i class="icon ion-plus"></i> 创建文件夹</a>
                                                    </div>
                                                </div>
                                            </div>
										</div>
										<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
											<div class="row col-10">
												<div class="col-12 col-sm-6 col-lg-4">
													<div class="card card-sm-4">
														<div class="card-icon bg-primary">
															<i class="ion ion-ios-folder"></i>
														</div>
														<div class="card-wrap">
															<div class="card-header">
																<h4>文件夹</h4>
															</div>
															<div class="card-body" th:text="${statistics.folderCount}"></div>
														</div>
													</div>
												</div>
												<div class="col-12 col-sm-6 col-lg-4">
													<div class="card card-sm-4">
														<div class="card-icon bg-danger">
															<i class="ion ion-android-document"></i>
														</div>
														<div class="card-wrap">
															<div class="card-header">
																<h4>文件</h4>
															</div>
															<div class="card-body" th:text="${statistics.fileCount}"></div>
														</div>
													</div>
												</div>
												<div class="col-12 col-sm-6 col-lg-4">
													<div class="card card-sm-4">
														<div class="card-icon bg-warning">
															<i class="ion ion-pie-graph"></i>
														</div>
														<div class="card-wrap">
															<div class="card-header">
																<h4>使用状况</h4>
															</div>
															<div class="card-body" style="font-size: 14px">
																<span th:text="${statistics.fileStore.currentSize}">0</span><span class="text-muted">/[[${statistics.fileStore.maxSize}]]KB</span>
															</div>
															<div class="card-progressbar">
																<div class="progress" style="height: 8px;">
																	<div id="progress" class="progress-bar" role="progressbar"></div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="row col-10">
												<div class="col-12 col-md-6 col-lg-6">
													<div class="card">
														<div class="card-body">
															<canvas id="myChart3"></canvas>
														</div>
													</div>
												</div>
												<div class="col-12 col-md-6 col-lg-6">

												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                            <div class="row">
                                                <div class="col-12">
                                                    <nav aria-label="breadcrumb" class="empty-space">
                                                        <ol class="breadcrumb">
                                                            <li th:if="${nowFolder.fileFolderId != 0}" class="breadcrumb-item active" aria-current="page">上传文件到此目录</li>
                                                            <li th:class="${nowFolder.fileFolderId == 0?'breadcrumb-item active':'breadcrumb-item'}">
                                                            <span th:if="${nowFolder.fileFolderId == 0}"
                                                                  th:text="根目录"></span><a style="font-weight: bold"
                                                                                          th:if="${nowFolder.fileFolderId != 0}"
                                                                                          href="file-store">根目录</a></li>
                                                            <li th:each="l:${location}" class="breadcrumb-item"><a
                                                                    style="font-weight: bold"
                                                                    th:href="@{/file-store(fId=${l.fileFolderId},fName=${l.fileFolderName})}"
                                                                    th:text="${l.fileFolderName}"></a></li>
                                                            <li th:if="${nowFolder.fileFolderId != 0}"
                                                                class="breadcrumb-item active" aria-current="page"
                                                                th:text="${nowFolder.fileFolderName}"></li>
                                                            <li th:if="${nowFolder.fileFolderId != 0}"
                                                                class="breadcrumb-item"><a
                                                                    th:href="@{/file-store(fId=${nowFolder.parentFolderId})}"
                                                                    title="返回上一层"><i
                                                                    class="icon ion-arrow-return-left"></i></a>
                                                            </li>
                                                        </ol>
                                                    </nav>
                                                </div>
                                            </div>
											<div id="uploader" style="margin-top: -10px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						</div>
                        <span id="nowF" style="display: none" th:text="${nowFolder.fileFolderId}"></span>
                        <span id="preF" style="display: none" th:text="${nowFolder.parentFolderId}"></span>
                        <span id="tarFolder" style="display: none"></span>
                        <span id="tarFile" style="display: none"></span>
                    </section>
                </div>
            </div>
        </div>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $(function () {
				var cur = [[${statistics.fileStore.currentSize}]];
				var max = [[${statistics.fileStore.maxSize}]];
				var w = cur/max*100;
            	$('#progress').css('width',w+'%');
               $('.folders').dblclick(function () {
                   let id = $(this).children("td").children("span").html();
                   var location = window.location.href;
                   let strings = location.split("?");
                   if (id != ""){
                       window.location.href = strings[0]+"?fId="+id;
                   }else{
                       return;
                   }
               });
               $('.files').dblclick(function () {
                   let id = $(this).children("td").children("span").html();
                   var location = window.location.href;
                   let strings = location.split("molihub");
                   if (id != ""){
                       window.location.href = strings[0]+"molihub/downloadFile?time="+new Date().getTime()+"&tip="+Math.random()*1000000+"&fId="+id;
                   }else{
                       return;
                   }
               });
               $('.folders').hover(function () {
                   let id = $(this).children("td").children("span").html();
                   $('#tarFolder').html(id);
                   $(this).siblings().removeClass('flag');
                   $(this).addClass('flag');
               },function () {
               });
               $('.files').hover(function () {
                   let id = $(this).children("td").children("span").html();
                   $('#tarFile').html(id);
                   $(this).siblings().removeClass('flag');
                   $(this).addClass('flag');
               },function () {
               });
            });
        </script>
		<script src="plug-ins/context-menu/js/jquery.contextMenu.min.js"></script>
		<script src="plug-ins/xcConfirm/js/xcConfirm.js"></script>
		<script>
			$(".files").contextMenu({
				width: 100, // width
				itemHeight: 30, // 菜单项height
				bgColor: "#fff", // 背景颜色
				color: "#333", // 字体颜色
				fontSize: 12, // 字体大小
				hoverBgColor: "#3498db", // hover背景颜色
				target: function(ele) { // 当前元素
					console.log(ele);
				},
				menu: [{ // 菜单项
					text: " 下载",
					callback: function() {
						let id = $('#tarFile').html();
						var location = window.location.href;
						let strings = location.split("molihub");
						if (id != ""){
							window.location.href = strings[0]+"molihub/downloadFile?time="+new Date().getTime()+"&tip="+Math.random()*1000000+"&fId="+id;
						}else{
							return;
						}
					}
				},
					{
						text: " 分享",
						callback: function() {
							var location = window.location.href;
							let strings = location.split("molihub");
							$.ajax({
								url:"getQrCode/?id="+$('#tarFile').html()+"&url="+strings[0]+"molihub",
								type:"get",
								async:false,
								success:function(data){
									var txt=  "<img src='"+data['imgPath']+"' style='width: 150px;height: 150px'/><br>" +
											  "<input style='width: 80%;font-size: 14px' value='"+data['url']+"'/>";
									var option = {
										title: "分享你的文件",
									};
									window.wxc.xcConfirm(txt, "custom", option);
								}
							});
						}
					},
					{
						text: " 重命名",
						callback: function() {
							let id = $('.flag td span').html();
							let name = $('.flag td a').html();
							let html = $('.flag td').eq(1).html($('' +
									"<form id='updateFileNameForm' action='updateFileName' method='post'>" +
									"<input id='updateFileName' name='myFileName' autocomplete='off' type='text' onblur='checkUpdateFile()' value='"+name+"'>" +
									"<input type='hidden' name='myFileId' value='"+id+"'>" +
									"</form>" +
									''));
						}
					},
					{
						text: " 删除",
						callback: function() {
							let id = $('#tarFile').html();
							var location = window.location.href;
							let strings = location.split("molihub");
							if (id != ""){
								window.location.href = strings[0]+"molihub/deleteFile?fId="+id+"&folder="+$('#nowF').html();
							}else{
								return;
							}
						}
					},
					{
						text: " 在线浏览",
						callback: function() {
							alert("在线浏览");
						}
					}
				]

			});
			$(".folders").contextMenu({
				width: 100, // width
				itemHeight: 30, // 菜单项height
				bgColor: "#fff", // 背景颜色
				color: "#333", // 字体颜色
				fontSize: 12, // 字体大小
				hoverBgColor: "#3498db", // hover背景颜色
				target: function(ele) { // 当前元素
					console.log(ele);
				},
				menu: [{ // 菜单项
					text: " 打开",
					callback: function() {
                        let id = $('#tarFolder').html();
                        var location = window.location.href;
                        let strings = location.split("?");
                        if (id != ""){
                            window.location.href = strings[0]+"?fId="+id;
                        }else{
                            return;
                        }
					}
				},
                    {
                        text: " 返回上一级",
                        callback: function() {
                            toPreFolder();
                        }
                    },
					{
						text: " 重命名",
						callback: function() {
							let id = $('.flag td span').html();
							let name = $('.flag td a').html();
							let html = $('.flag td').eq(1).html($('' +
                                "<form id='updateFolderForm' action='updateFolder' method='post'>" +
                                "<input id='updateFolderName' name='fileFolderName' autocomplete='off' type='text' onblur='checkUpdateFolder()' value='"+name+"'>" +
                                "<input type='hidden' name='fileFolderId' value='"+id+"'>" +
                                "</form>" +
                                ''));
                        }
					},
					{
						text: " 新建文件夹",
						callback: function() {
                            addFolderElement();
						}
					},
					{
						text: " 清空并删除",
						callback: function() {
							let id = $('#tarFolder').html();
							var location = window.location.href;
							let strings = location.split("molihub");
							if (id != ""){
								window.location.href = strings[0]+"molihub/deleteFolder?fId="+id;
							}else{
								return;
							}
						}
					}
				]

			});
			$(".empty-space").contextMenu({
				width: 100, // width
				itemHeight: 30, // 菜单项height
				bgColor: "#fff", // 背景颜色
				color: "#333", // 字体颜色
				fontSize: 12, // 字体大小
				hoverBgColor: "#3498db", // hover背景颜色
				target: function(ele) { // 当前元素
					console.log(ele);
				},
				menu: [
					{
						text: " 新建文件夹",
						callback: function() {
                            addFolderElement();
						}
					},
					{
						text: " 返回上一级",
						callback: function() {
						    toPreFolder();
						}
					}
				]

			});
			function toPreFolder() {
                var location = window.location.href;
                let strings = location.split("?");
                var pre = $('#preF').html();
                if (pre != ""){
                    window.location.href = strings[0]+"?fId="+pre;
                }else{
                    return;
                }
            }
			function addFolderElement() {
                var now = $('#nowF').html();
                $("<tr class='files-items folders'><td><i style='font-size: 24px;color: orange' class='icon ion-android-folder'></i></td>" +
                    "<td>" +
                    "<form id='addFolderForm' action='addFolder' method='post'>" +
                    "<input id='newFolder'  autocomplete='off' name='fileFolderName' type='text' onblur='checkAddFolder()'>" +
                    "<input type='hidden' name='parentFolderId' value='"+now+"'>" +
                    "</form>" +
                    "</td>" +
                    "<td style='font-weight: 300'>文件夹</td>" +
                    "<td style='font-weight: 300'>-</td>" +
                    "<td style='font-weight: 300'>-</td>" +
                    "</tr>").insertAfter($('#files-table-title'));
                $('#newFolder').focus();
            }
			function checkAddFolder() {
				var name = $.trim($("#newFolder").val());
				var nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{1,20}$/;
				if (!nameReg.test(name)) {
					alert("文件夹格式错误！【汉字、字母、数字】");
					var location = window.location.href;
					window.location.href = location;
				}else{
					$('#addFolderForm').submit();
				}
			}
			function checkUpdateFolder() {
				var name = $.trim($("#updateFolderName").val());
				var nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;
				if (!nameReg.test(name)) {
					alert("文件夹格式错误！【汉字、字母、数字】");
					var location = window.location.href;
					window.location.href = location;
				}else{
					$('#updateFolderForm').submit();
				}
			}
			function checkUpdateFile() {
				var name = $.trim($("#updateFileName").val());
				var nameReg = /^[^\u4E00-\u9FA5\uF900-\uFA2D\w-_]{2,20}$/;
				if (!nameReg.test(name)) {
					alert("文件夹格式错误！【汉字、字母、数字】");
					var location = window.location.href;
					window.location.href = location;
				}else{
					$('#updateFileNameForm').submit();
				}
			}
		</script>
		<script src="js/easyUploader.jq.js"></script>
		<script>
			var uploader = easyUploader({
				id: "uploader",
				accept: '',
				action: 'uploadFile',
				dataFormat: 'formData',
                headers:{
				  id:$('#nowF').html()
                },
				maxCount: 10,
				maxSize: 50,
				multiple: true,
				data: null,
				beforeUpload: function(file, data, args) {
					/* dataFormat为formData时配置发送数据的方式 */
					data.append('token', '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT');
					data.append('otherKey', 'otherValue');

					/* dataFormat为base64时配置发送数据的方式 */
					// data.base = file.base;
					// data.token = '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT';
					// data.otherKey = 'otherValue';
				},
				onChange: function(fileList) {
					/* input选中时触发 */
					document.body.onbeforeunload = function() {
						window.event.returnValue = "确认离开？";
					}
				},
				onRemove: function(removedFiles, files) {
					console.log('onRemove', removedFiles);
				},
				onSuccess: function(res) {
					console.log('onSuccess', res);
					/**
					 * 注意，接口调通不代表视图会展示成功，接口调通时视图要展示成功需要满足以下两点条件
					 * 1. 返回数据必须由对象包裹，如 { code: 200, data: null }
					 * 2. 必须有一个用于标识成功状态的属性，默认属性是code，默认成功属性值是200，配置项分别对应successKey和successValue，可视情况自行配置
					 */

					/**
					 * 可以在onSuccess/onError等回调函数中通过实例的files属性可以访问上传文件，如 var files = uploader.files; console.log一下就会发现files数组中每个元素由以下属性构成
					 * 1. ajaxResponse: ajax的的响应结果
					 * 2. base: 文件的base64编码
					 * 3. checked: 该文件是否被选中
					 * 4. file: 文件对象
					 * 5. id: 插件内部标识的文件id
					 * 6. isImg: 插件内部标识文件时否是图片
					 * 7. previewBase: 文件压缩后的base64编码，用于插件内部展示预览图
					 * 8. uploadPercentage: 文件上传进度百分比值
					 * 9. uploadStatus: 文件上传状态
					 */
                    document.body.onbeforeunload = function () {

                    }
				},
				onError: function(err) {
					console.log('onError', err);
				},
			});
		</script>
		<script src="u-admin/dist/modules/jquery.min.js"></script>
		<script src="u-admin/dist/modules/popper.js"></script>
		<script src="u-admin/dist/modules/tooltip.js"></script>
		<script src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script src="u-admin/dist/js/sa-functions.js"></script>

		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script src="u-admin/dist/modules/summernote/summernote-lite.js"></script>

		<script src="u-admin/dist/js/scripts.js"></script>
		<script src="u-admin/dist/js/custom.js"></script>
		<script src="u-admin/dist/js/demo.js"></script>
		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script>
			var ctx = document.getElementById("myChart3").getContext('2d');
			var myChart = new Chart(ctx, {
				type: 'doughnut',
				data: {
					datasets: [{
						data: [
							[[${statistics.doc}]],
							[[${statistics.image}]],
							[[${statistics.video}]],
							[[${statistics.music}]],
							[[${statistics.other}]],
						],
						backgroundColor: [
							'#3498db',
							'#28a745',
							'#ffc107',
							'#dc3545',
							'#343a40',
						],
						label: 'Dataset 1'
					}],
					labels: [
						'文档',
						'图像',
						'视频',
						'音乐',
						'其他'
					],
				},
				options: {
					responsive: true,
					legend: {
						position: 'bottom',
					},
				}
			});

		</script>
	</body>
</html>
